<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>个人中心-记录详情</title>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <link href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="../scss/bootstrap/javascripts/bootstrap.min.js"></script>
    <script src="../scss/bootstrap/javascripts/offcanvas.js"></script>
</head>
<body>
<div class="personal">
    <section class="p_header hidden-xs">
        <div class="tree_header">
            <div class="max_body">
                <div class="pull-left ">
                    <ul class="list-inline">
                        <li><a href="#">首页</a></li>
                        <li><a href="#">新闻</a></li>
                        <li><a href="#">家庭树</a></li>
                        <li><a href="#">族谱</a></li>
                        <li><a href="#">广场</a></li>
                        <li><a href="#">百家姓</a></li>
                    </ul>
                </div>
                <div class="pull-right hidden-sm hidden-xs">
                    <div class="user_box">
                        <div class="user">
                            <i class="fa fa-user m-r-xs"></i>杨薇
                        </div>
                        <ul class="drop_info">
                            <li><a href="#" class="active">个人设置</a></li>
                            <li><a href="#">消息通知</a></li>
                            <li><a href="#">退出登录</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="visible-xs">
        <div class="p_xs_menu">
            <nav class="navbar  navbar-inverse text-right ht_nav" role="navigation">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse"
                                data-target="#example-navbar-collapse">
                            <span class="sr-only">切换导航</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                    <div class="collapse navbar-collapse" id="example-navbar-collapse">
                        <ul class="list-inline">
                            <li><a href="#">首页</a></li>
                            <li><a href="#">新闻</a></li>
                            <li><a href="#">家庭树</a></li>
                            <li><a href="#">族谱</a></li>
                            <li><a href="#">广场</a></li>
                            <li><a href="#">百家姓</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
            <a class="navbar-brand col-xs-5 visible-xs" href="#"> <img src="../images/logo2.png" alt="族谱网www.zupu.cn" height="32px" class="m-r-xs pull-left"></a>
        </div>
    </section>
    <section class="p_info max_body">
        <div class="row">
            <div class="col-sm-8 col-xs-12">
                <div class="media p15">
                    <a class="media-left col-xs-4 row" href="#">
                        <img src="../images/demo01.jpg." alt="头像" class="img-rounded img-responsive">
                    </a>
                    <div class="media-body p-l-md">
                        <h4 class="media-heading text_black"> <span class="text-info fwb">♂</span> 杨薇的主页</h4>
                        <p class="m-t text_oneline">中华人民共和国解放军少将，央视军事频道评论员</p>
                        <p class="m-t-xs hidden-xs">http://www.zupu.cn/u/100020 <button class="btn btn_xs">复制</button></p>
                        <p class="m-t-xs">
                            亲情指数：<i class="fa fa-star text_theme"></i><i class="fa fa-star text_theme"></i><i class="fa fa-star text_theme"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 hidden-xs text-center qr_hot">
                <div class="">
                    <img src="../images/ewm.png" alt="" class="img-thumbnail">
                    <p class="text-center f18">热度<span class="text_theme">23243</span></p>
                </div>
            </div>
        </div>
    </section>
    <section class="p_nav max_body">
        <ul class="list-inline">
            <li class="hidden-xs"><a>&emsp;</a></li>
            <li><a href="#">主页</a></li>
            <li><a href="#" class="active">记录<span class="hidden-xs">（234）</span></a></li>
            <li><a href="#">相册</a></li>
            <li><a href="#">家庭树</a></li>
            <li><a href="#">个人档案</a></li>
        </ul>
    </section>
    <section class="p_main max_body">
        <div class="row">
            <!--左边记录-->
            <div class="col-xs-12 col-sm-8 m-t">
                <div class="media">
                    <div class="media-left">
                        <img src="../images/head02.jpg" alt="" class="img-circle">
                    </div>
                    <div class="media-body">
                        <h3 class="f18 m-t-xs">杨勇</h3>
                        <p class="text_gray m-t-xs">11-10 11:15</p>
                    </div>
                </div>
                <div class="m-t-md">
                    族谱APP上线啦！一年一度的秋季招聘已经开始，各高校应届毕业生正积极投入火热的求职应聘中。
                    近日，人社部、教育部联合印发《关于实施高校毕业生就业创业促进计划的通知》，对进一步做好
                    高校毕业生就业创业工作作出部署。
                </div>
                <div class="m-t clearfix">
                    <ul class="list-line-3">
                        <li><img src="../images/0.jpeg" alt="" class="img-responsive"></li>
                        <li><img src="../images/0.jpeg" alt="" class="img-responsive"></li>
                        <li><img src="../images/0.jpeg" alt="" class="img-responsive"></li>
                        <li><img src="../images/0.jpeg" alt="" class="img-responsive"></li>
                        <li><img src="../images/0.jpeg" alt="" class="img-responsive"></li>
                        <li><img src="../images/0.jpeg" alt="" class="img-responsive"></li>
                        <li><img src="../images/0.jpeg" alt="" class="img-responsive"></li>
                        <li><img src="../images/0.jpeg" alt="" class="img-responsive"></li>
                        <li><img src="../images/0.jpeg" alt="" class="img-responsive"></li>
                    </ul>
                </div>
                <div class="m-t-xs bbs clearfix">
                    <ul class="list-line-3 f16 text_gray">
                        <li class="text_theme"><i class="fa fa-thumbs-up"></i> 8</li>
                        <li class="text-center"><i class="fa fa-comment"></i> 2</li>
                        <li class="text-right"><i class="fa fa-share-alt"></i> 分享</li>
                    </ul>
                </div>
                <!--点赞人-->
                <div class="rd_thumbs_up bbs p-t p-b">
                    <ul class="list-inline">
                        <li class="f12"><i class="fa fa-thumbs-o-up fa-2x"></i></li>
                        <li><a class="circle_head color_rose circle_head_xs">美人</a></li>
                        <li><a class="circle_head color_blue circle_head_xs"><img src="../images/demo01.jpg" alt=""></a></a></li>
                        <li><a class="circle_head  color_ochre circle_head_xs">杨吉</a></li>
                        <li><a class="circle_head circle_head_xs"><img src="../images/demo01.jpg" alt=""></a></li>
                    </ul>
                </div>
                <!--评论区-->
                <div class="rd_comment p-lr">
                    <div class="media p-t p-b bbs">
                        <div class="media-left">
                            <a class="circle_head color_blue circle_head_md">杨勇</a>
                        </div>
                        <div class="media-right">
                            <div class="clearfix">
                                <h3 class="pull-left f16 fwn text_black">杨勇</h3>
                                <div class="pull-right text_gray">08-12 12:34</div>
                            </div>
                            <div class="rd_c_text m-t-xs">
                                恭喜族谱网APP上线。
                            </div>
                        </div>
                    </div>
                    <div class="media p-t p-b bbs">
                        <div class="media-left">
                            <a class="circle_head color_blue circle_head_md"><img src="../images/demo01.jpg" alt=""></a></a>
                        </div>
                        <div class="media-right">
                            <div class="clearfix">
                                <h3 class="pull-left f16 fwn text_black">美人</h3>
                                <div class="pull-right text_gray">08-12 12:34</div>
                            </div>
                            <div class="rd_c_text m-t-xs">
                                族谱网APP里面的游戏很好玩啊，大家都来下载啊。长点测试一下长度！
                            </div>
                        </div>
                    </div>
                </div>
                <div class="pb_comment m-t-md">
                    <div class="clearfix">
                        <div class="pull-left">
                            <span class="f16 text_theme m-r">评论</span><span class="f12 text_gray">文明上网理性发言</span>
                        </div>
                        <div class="pull-right text_gray">
                            1528条评论
                        </div>
                    </div>
                    <div class="border-s m-t-xs">
                        <textarea name="" id="" class="w"></textarea>
                        <div class="clearfix p-l-xs p-r-xs">
                            <div class="pull-left">
                                <a href="#"><i class="fa fa-file-picture-o"></i> 图片</a>
                            </div>
                            <div class="pull-right text_gray m-b-xs">
                                <button class="btn btn_theme btn-xs">发表评论</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--右边栏目-->
            <div class="col-xs-12 col-sm-4 pull-right m-t">
                <div class="p_mr_box  border-s">
                    <div class="box_t_one">
                        推荐记录
                    </div>
                    <div class="p-l-md p-r-md">
                        <ul>
                            <li class="intercept_date bbs p-tb">
                                <a href="#"><div class="pull-left">
                                    毕业生把网游战绩写入简历 获用人单位青睐
                                </div></a>
                                <div class="pull-right">
                                    11-10
                                </div>
                            </li>
                            <li class="intercept_date bbs p-tb">
                                <a href="#"><div class="pull-left">
                                    毕业生把网游战绩写入简历 获用人单位青睐
                                </div></a>
                                <div class="pull-right">
                                    11-10
                                </div>
                            </li>
                            <li class="intercept_date bbs p-tb">
                                <a href="#"><div class="pull-left">
                                    毕业生把网游战绩写入简历 获用人单位青睐
                                </div></a>
                                <div class="pull-right">
                                    11-10
                                </div>
                            </li>
                            <li class="intercept_date p-tb">
                                <a href="#"><div class="pull-left">
                                    毕业生把网游战绩写入简历 获用人单位青睐
                                </div></a>
                                <div class="pull-right">
                                    11-10
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="p_mr_box  m-t-md">
                    <div class="box_t_two">
                        家庭相册
                    </div>
                    <div class="m-t">
                        <div class="border-s text-center">
                            <img src="../images/2.jpg" alt="" class="img-responsive">
                            <a href="#" class="p_mr_box_btn ">换一张</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <footer class="p_footer max_body text-center">
        <ul class="list-inline auto_center">
            <li><a href="#">关于族谱</a></li>|
            <li><a href="#">联系我们</a></li>
            <li><a href="#">版权所有@族谱网 备案：湘ICP备 1600426号</a></li>
        </ul>
    </footer>
</div>
</body>
</html>